<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./plugins/elementui/index.css">
    <link rel="stylesheet" href="./plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>登录</title>
    <style>
      .wrapper {
        height: 100vh;
        /* background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB); */
        background-image: url("./img/12345.jpg");
        background-size: cover; 
        overflow: hidden;
      }

    </style>
  </head>
  <body>
    
    <div id="app">
      <div class="wrapper">
        <div style="    position: absolute;
        top: 205px;
        right: 367px; background-color: #fff; width: 350px; height: 534px; padding: 20px; border-radius: 10px">
          <div style="text-align: center; font-size: 24px">
            <h3 style=" font-size: 32px;margin-top: 18px;margin-bottom: 36px;">体检运营平台</h3><b>登 录</b></div>
    
          <el-form style="margin-top:  0px;" :model="formData" :rules="rules" ref="mForm">
            <el-form-item prop="username" style="width: 250px;margin: 50px 50px;">
              <el-input placeholder="请输入username" size="medium"  prefix-icon="el-icon-user" v-model="formData.username"></el-input>
            </el-form-item>
            <el-form-item prop="password" style="width: 250px;margin: 50px 50px;">
              <el-input type="password" placeholder="请输入密码" size="medium"  prefix-icon="el-icon-user"  show-password v-model="formData.password"></el-input>
            </el-form-item>
            
            <el-form-item style="float: right;">
              <el-button  type="primary" size="medium"  autocomplete="off" @click="login">登录</el-button>
              <el-button  size="medium"  autocomplete="off"  @click="goRegister()">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>

  <!-- 引入组件库 -->
<script src="./js/vue.js"></script>
<script src="./plugins/elementui/index.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<script>
 
    var vue = new Vue({
        el: '#app',
        data:{
          formData:{},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
      }
    },
    
  methods: {
    goRegister(){
        window.location.href = '/register.html';
    },
    login(){
      
      this.$refs['mForm'].validate((valid) => {
        console.log(this.formData);

        if (valid) {  // 表单校验合法

            axios.post('http://localhost:9527/user/findUser',{username:this.formData.username,
                                                              password:this.formData.password}).then((resp)=>{
                    console.log(resp)
                    if (resp.data.flag){
                      //存本地
                        localStorage.setItem("personal",JSON.stringify(resp.data.data) )
                      //置空
                        this.formData = {};
                        this.$message({ showClose: true,message:"登录成功！",type:"success"})
                      //倒计时，跳转到主页
                        setTimeout(()=>{
                          window.location.href = '/main.html';
                        },200)
                    }else{
                      this.$message({ showClose: true,message:"登录失败！",type:"error"})
                    }
                })
             
            } else {
              this.$message.error(msg)
            }
          })
      }
     
    },
   
  })
</script>
</html>
